import React, { Component } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  DeviceEventEmitter
} from "react-native";
import NavBarConfig from "../modules/NavBar";
import { TRANFER_AMOUNT, TRANFER_TYPE } from "../../util/Const";
import storage from "../../util/storage";
import { toast } from "../../util/tip";
import ModalDropdown from "react-native-modal-dropdown";
import receiptStyles from "../../style/pages/receiptCode";

class Receiptcodeset extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "收款碼設置",
        headerRight: []
      },
      navigation
    );

  state = {
    type: 0,
    amount: 0,
    select: null
  };

  handleChange(type) {
    this.setState({
      type: type
    });
  }

  handleSetTrander() {
    if (Number(this.state.amount)) {
      storage.set(TRANFER_AMOUNT, this.state.amount);
      storage.set(TRANFER_TYPE, this.state.type);
      DeviceEventEmitter.emit("setQrcode");
      this.props.navigation.goBack();
    } else {
      toast("金額必须为不为零的数字喔～");
    }
  }

  handleInput(text) {
    this.setState({
      amount: text
    });
  }

  render() {
    return (
      <View>
        <View style={receiptStyles.qrcodeSetWrap}>
          <Text style={receiptStyles.setLeft}>劃轉類型</Text>
          <TouchableOpacity
            onPress={() => this.state.select.show()}
            style={receiptStyles.input}
          >
            <ModalDropdown
              style={[
                receiptStyles.input,
                {
                  top: 15
                }
              ]}
              defaultIndex={0}
              defaultValue={"额度"}
              options={["额度", "BGT"]}
              onSelect={index => this.handleChange(index)}
              ref={ref => (this.state.select = ref)}
              dropdownStyle={{
                width: "72%",
                marginTop: 15,
                marginLeft: -8,
                backgroundColor: "#f0f0f0",
                borderRadius: 8
              }}
              dropdownTextStyle={{
                backgroundColor: "#f0f0f0",
                borderWidth: 0,
                borderRadius: 8,
                overflow: "hidden"
              }}
              dropdownTextHighlightStyle={{
                backgroundColor: "#fff"
              }}
            />
          </TouchableOpacity>
        </View>

        <View style={receiptStyles.qrcodeSetWrap}>
          <Text style={receiptStyles.setLeft}>劃轉金額</Text>
          <TextInput
            underlineColorAndroid="transparent"
            style={[receiptStyles.input]}
            placeholder={this.state.type == 0 ? `请输入BGT数量` : `请输入额度`}
            keyboardType="numeric"
            value={this.state.amount}
            onChangeText={this.handleInput.bind(this)}
          />
        </View>

        <TouchableOpacity onPress={this.handleSetTrander.bind(this)}>
          <Text style={receiptStyles.confirmSet}>確定</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Receiptcodeset;
